<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>商品界面</title>
<link rel="stylesheet" href="../res/layui/css/layui.css" media="all">
<script src="../res/layui/layui.js"></script>
</head>
<style type="text/css">
		.layui-table td div {
			height: 80px;
		}
		
		.layui-table td div img {
			height: 80px;
			width: 80px;
		}
		
		#form_add input {
			width: 70%;
		}
	</style>

<body>

	<form class="layui-form" action="" style="margin-top: 20px;"
		onsubmit="return false">
		
		<div class="layui-form-item">
		
				<label class="layui-form-label">商品名称</label>
				<div class="layui-input-inline" style="width: 80px;">
					<input type="text" name="pname" id="pname" placeholder=""
						autocomplete="off" class="layui-input">
				</div>
				<label class="layui-form-label">颜色</label>
				<div class="layui-input-inline" style="width: 80px;">
					<input type="text" name="pcolor" id="pcolor" placeholder=""
						autocomplete="off" class="layui-input">
				</div>
				
				<label class="layui-form-label">大小</label>
				<div class="layui-input-inline" style="width: 80px;">
					<input type="text" name="size" id="size" placeholder=""
						autocomplete="off" class="layui-input">
				</div>
			<label class="layui-form-label">价格</label>
					<div class="layui-input-inline" style="width: 80px;">
						<input type="text" name="min" id="jg1" placeholder="￥" autocomplete="off" class="layui-input">
					</div>
					<div class="layui-form-mid">-</div>
					<div class="layui-input-inline" style="width: 80px;">
						<input type="text" name="max" id="jg2" placeholder="￥" autocomplete="off" class="layui-input">
					</div>
				<label class="layui-form-label">商品状态</label>
				<div class="layui-input-inline" style="width: 90px;">
					<select id="pstate" name="pstate" lay-verify="">
						<option value=""></option>
					    <option value="0">未上架</option>
						<option value="1">下架</option>
						<option value="2">上架</option>
					</select>
				</div>
				
			
			
				<label class="layui-form-label">商品类别</label>
				<div class="layui-input-inline" style="width: 90px;">
					<select name="categoryid" id="categoryid" lay-verify="">
						<option value=""></option>
					</select>
			
		       	</div>
   
			<div class="layui-inline">

				<button id="shousuo" class="layui-btn" lay-submit
					lay-filter="formDemo">搜索</button>
				<button id="del" class="layui-btn layui-btn-danger" lay-submit
					lay-filter="bachDel">批量删除</button>
				<button id="add" class="layui-btn" lay-submit lay-filter="add">添加</button>
			</div>

		</div>

	</form>

	<table id="demo" lay-filter="test"></table>
	<script type="text/html" id="barDemo">
			<a class="layui-btn layui-btn-mini" lay-event="detail">查看</a>
			<a class="layui-btn layui-btn-mini" lay-event="edit">编辑</a>
			<a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del">删除</a>
                <!-- 这里同样支持 laytpl 语法，如： -->
  {{#  if(d.auth > 2){ }}
    <a class="layui-btn layui-btn-mini" lay-event="check">审核</a>
  {{#  } }}

		</script>

	<script>
		var index;
		layui.use([ 'table', 'layer', 'form' ], function() {
			var table = layui.table;
			var layer = layui.layer;
			var form = layui.form;
			var $ = layui.$;
			//执行一个laydate实例

			//加载下拉框
			$.post("http://localhost:8080/g4/products/selsctOpResults",
					{}, function(result) {
						if (result.code === '0') {
							$.each(result.data, function(index, item) {
								$('#categoryid').append(
										new Option(item.value, item.view));// 下拉菜单里添加元素
							});
							form.render('select');

						} else {
							layer.alert(result.msg);
						}
					}, "json");

			table.render({
				id : "idTest",
				elem : '#demo' //指定原始表格元素选择器（推荐id选择器）
				,
				height : 500 //容器高度
				,
				url : "/g4/products/list",
				page : true,
				cols : [ [ //标题栏
				{
					checkbox : true

				}, {
					field : 'picurl',
					title : '图片',
					width : 100,
					templet : '<div><img src="../images/{{d.picurl}}" /></div>'
				}, {
					field : 'pid',
					title : 'ID',
					width : 80
				}, {
					field : 'pname',
					title : '商品名称',
					width : 200
				}, {
					field : 'categoryid',
					title : '类别',
					width : 100
				}, {
					field : 'pIntroduction',
					title : '介绍',
					width : 100
				}, {
					field : 'creattime',
					title : '创建时间',
					width : 100
				}, {
					field : 'updatetime',
					title : '修改时间',
					width : 100
				}, {
					field : 'size',
					title : '大小',
					width : 100
				}, {
					field : 'pStateStr',
					title : '三个状态',
					width : 100

				},{
					field : 'price',
					title : '价格',
					width : 200
				}, {
					field : 'pcolor',
					title : '颜色',
					width : 200
				}, {
					field : 'isDelete',
					title : '是否删除',
					width : 200
				}, {
					fixed : 'right',
					width : 300,
					align : 'center',
					toolbar : '#barDemo'
				} ] ]

			});
			//监听搜索
			form.on('submit(formDemo)', function(data) {
				table.reload('idTest', {
					where : {
						pname : $("#pname").val(),
						pstate : $("#pstate").val(),
						categoryid : $("#categoryid").val(),
						pcolor : $("#pcolor").val(),
						size : $("#size").val(),
						jg1 : $("#jg1").val(),
						jg2 : $("#jg2").val()
					}

				});
				return false; //阻止表单跳转
			});
			//添加提交
			form.on('submit(add-submit)', function(data) {
				var url = "/g4/products/addOne"
				var dt = $("#form_add").serialize();
				$.post(url, dt, function(res) {
					if (res.code == '0') {
						layer.msg('添加成功');
						layer.close(index);
						$("#shousuo").click();
					} else {
						layer.msg('添加失败');
					}
				}, 'json')
				return false; //阻止表单跳转
			});
			//添加
			form.on('submit(add)', function(data) {
				index = layer.open({
					type : 2,
					content : 'p-add.html',
					area : [ '800px', '500px' ]

				});

				return false; //阻止表单跳转
			});
			//批量删除
			form.on('submit(bachDel)', function(data) {
				layer.confirm('真的删除行么', function(index) {
					var url = "/g4/products/batchDel"
					var checkStatus = table.checkStatus('idTest'); //test即为基础参数id对应的值
					var list = checkStatus.data; //获取选中行的数据
					var ids = "";
					for (var i = 0; i < list.length; i++) {
						ids += list[i].pid;

						if (i < list.length - 1) {
							ids += ",";
						}
					}
					var dt = {
						ids : ids
					}
					$.post(url, dt, function(res) {
						if (res.code == '0') {
							layer.msg('删除成功');
							$("#shousuo").click();
						} else {
							layer.msg('删除失败');
						}
					}, 'json')
					layer.close(index);
				});
				return false; //阻止表单跳转
			});
			//监听工具条
			table.on('tool(test)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
				var data = obj.data; //获得当前行数据
				var layEvent = obj.event; //获得 lay-event 对应的值
				
				//var tr = obj.tr; //获得当前行 tr 的DOM对象
				
				//数据存到本地
					layui.sessionData("ids", {
						key : "pid",
						value : data.pid
					})

				if (layEvent === 'detail') { //查看
					layer.open({
						type : 2,
						area : [ '800px', '500px' ],
						content : 'p-chakan.html'
					//这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
					});

				} else if (layEvent === 'del') { //删除
					layer.confirm('真的删除行么', function(index) {
						var url = "/g4/products/delete"
						var dt = {
							id : data.pid
						}
						$.post(url, dt, function(res) {
							if (res.code == '0') {
								layer.msg('删除成功');
								obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
							} else {
								layer.msg('删除失败');
							}
						}, 'json')
						layer.close(index);
						//向服务端发送删除指令
					});
				} else if (layEvent === 'edit') { //编辑
					layer.open({
						type : 2,
						area : [ '800px', '500px' ],
						content : 'p-update.html'
					//这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
					});

				}
			});

		});
	</script>

</body>

</html>